<template>
  <!-- 用户信息 -->
  <el-card>
    <div class="user">
       <!-- 左侧头像 --> 
       <div class="user-avatar">
          <el-avatar :size="80"  @error="errorHandler">
            <img :src="userStor.state.userInfo.avatar"/>
          </el-avatar>
       </div>
       <!-- 右侧信息 -->
       <div class="user-info">
          <h1>欢迎来到Disk网盘系统</h1>
          <h5>在这里你可以随意存储各种文件，也可以与他人分享文件。</h5>
      </div>
    </div>
  </el-card>

  <!-- 使用须知 -->
   <div class="disk-info">
      <el-card class="box-card-one">
        <template #header>
          <div>
            <span>使用须知</span>
          </div>
        </template>
        <div class="text-gray">如何添加聊天好友</div>
        <span >找到个人中心的的网盘ID，在聊天模块中输入对方的网盘ID即可添加好友。</span>
      </el-card>

      <el-card class="box-card-two">
        <template #header>
          <div>
            <span>浏览量(PV)</span>
          </div>
        </template>
        <div class="text-gray">1566 🎈</div>
        <span>总浏览量</span>
      </el-card>
   </div>

   
  <div class="bottom-box">
    <!-- echarts图表 -->
    <el-card  class="bottom-one">
      <template #header>
          <div>
            <span>网盘容量</span>
          </div>
        </template>
      <div ref="chartRef" style="width: 100%; height: 400px;"></div>
    </el-card>

    <!-- 系统公告 -->
    <el-card class="bottom-two">
      <template #header>
        <div>
          <span>系统公告</span>
        </div>
      </template>
      <div style="height: 300px">
        <el-timeline >
          <el-timeline-item 
            :timestamp="item.time" 
            placement="top" 
            v-for="item in systemInform"
            :color="item.color"
          >
            <el-card  class="custom-class" >
              <h4>{{item.title}}</h4>
              <p>{{item.content}}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>

  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref,onUnmounted } from 'vue';
import {userStore} from '@/stores/disk/user'
const userStor = userStore();
// 定义DOM引用
const chartRef = ref<HTMLDivElement | null>(null);
let myChart: echarts.ECharts | null = null;

// 定义ECharts配置项
const options: echarts.EChartsOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c}GB ({d}%)' // 使用formatter来添加单位
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '网盘',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 20, name: '已用容量' },
        { value: 5, name: '剩余容量' },
      ]
    }
  ]
};

// 使用onMounted生命周期确保DOM已渲染
onMounted(() => {
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value);
    myChart.setOption(options);

    // 可选：添加窗口resize监听
    window.addEventListener('resize', () => {
      myChart?.resize();
    });
  }
});

// 组件卸载时清理资源（可选优化）
onUnmounted(() => {
  if (myChart) {
    myChart.dispose();
    window.removeEventListener('resize', () => {});
  }
});

//系统公告
const systemInform = ref([
  {
    title: '第一次完成了Disk网盘的部分开发',
    content: '从vue2.0升级到vue3.0',
    time: '2025/05/05',
    color: 'rgb(53, 197, 89)'
  },
])
const errorHandler = () => true
</script>



<style scoped lang="less">
.user{
    display:flex;
    .user-info{  
      margin-left:20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      h1{
        font-size: 20px;
      }
      h5{
        margin-top: 20px;
        font-size: 14px;
      }
    }
}
.disk-info{
  display: flex;
  margin-top: 20px;
}
.box-card-one{
  height: 25%;
  width: 50%;
}
.box-card-two{
  height: 25%;
  width: 50%;
  margin-left: 20px;
}
.text-gray{
  margin-bottom: 20px;
}
.bottom-box{
  margin-top: 20px;
  display: flex;
}
.bottom-one{
  height: 90%;
  width: 40%;
}
.bottom-two{
  width: 60%;
  margin-left: 20px;
  overflow-y: auto;
  overflow-x: hidden;

  /* 去除滚动条上下箭头 */
  &::-webkit-scrollbar-button {
    display: none; /* 隐藏滚动条两端的箭头按钮 */
  }

  /* 滚动条整体样式（浅色优化） */
  &::-webkit-scrollbar {
    width: 6px; /* 滚动条宽度 */
  }
  &::-webkit-scrollbar-track {
    background: #f8f9fa; /* 轨道背景色（浅灰色） */
  }
  &::-webkit-scrollbar-thumb {
    background: #999797; /* 滑块颜色（更浅） */
    border-radius: 3px; /* 圆角 */
  }
  
}
.custom-class{
  background-color: #f0f5ff; /* 浅蓝色背景 */
  padding: 15px;
  margin: 0;
  border-radius: 8px;
}
</style>